<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件指令</title>
    <script src="js/vue.global.js"></script>
    <style>
        table, tr, td {
            text-align: center;
            border-collapse: collapse;
            border: 1px solid red;
        }

        th, td {
            width: 120px;
            height: 32px;
            line-height: 32px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="box">
 <ul>
     <li>商品id:{{googds.id}}</li>
     <li>商品标题:{{googds.name}}</li>
     <li>商品属性:
         <!--
        <div>总页数：{{googds.attr}}</div>
        <div>出版社：{{googds.attr}}</div>
        <div>出版时间：{{googds.attr}}</div>
        <div>作者：{{googds.attr}}</div>
        -->
         <ul>
             <li v-for="value, key in googds.attr">{{key}}: {{value}}</li>
         </ul>
     </li>

 </ul>
</div>
<script>
    var oc_vm = Vue.createApp({
        data() {
            return {
                googds:{
                    id: 1,
                    name: "python入门",
                    attr:{
                        "总页数": 188,
                        "出版社": "人民出版社",
                        "出版时间": "2023年12月13日",
                        "作者": "佚名",
                    }
                }
            }
        }
    }).mount("#box")
</script>
</body>
</html>